<template>
  <TodoHeader @addTodo="todo" />
  <TodoList v-model:todos="todos" />
  <TodoFooter v-model:todos="todos" />
</template>

<script setup>
import TodoHeader from './components/TodoHeader.vue';
import TodoList from './components/TodoList.vue';
import TodoFooter from './components/TodoFooter.vue';

import { ref, watch, onMounted } from 'vue';

const todos = ref([]);

const todo = (value) => {
  todos.value.push(value);
};

watch(
  todos,
  () => {
    localStorage.setItem('todos', JSON.stringify(todos.value));
  },
  { deep: true }
);

onMounted(() => {
  const localTodos = localStorage.getItem('todos');
  if (localTodos) {
    todos.value = JSON.parse(localTodos);
  }
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
